<!--
* @fileName detail-card.vue
* @author caoke
* @date 2022/10/20 17:04:42
* @version V1.0.0
* @description 
!-->
<template>
  <div class="container-card">
    <div class="container-title">
      <img src="@/assets/images/product/标题右@2x.png" alt="">
      <div class="title">{{title}}</div>
      <img src="@/assets/images/product/标题右@2x.png" alt="">
    </div>
    <div class="card-bottom l-content" :class="[cardPadding?'card-padding':'padd']">
      <slot />
    </div>
  </div>

</template>

<script>
export default {
  name: "detail-card",
  props: {
    title: String,
    cardPadding: Boolean,
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
.container-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -4px 16px 0px rgba(148, 163, 178, 0.05);
  // border-radius: 20px 20px 0px 0px;
  // border-bottom: 10px solid #f7f7f7;
}

.card-bottom {
  width: 100%;
  box-sizing: border-box;
}

.card-padding {
  padding: 20px;
}

.padd {
  /*padding-bottom: 20px;*/
}
.container-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  .title {
    // width: 113px;
    height: 27px;
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1a1c1f;
  }
  img {
    width: 47px;
    height: auto;
    margin: 13px;
  }
}
</style>